<template>
	<view>
		<view class="login-bg">
			<view class="bg24">
				<view style="height: 150rpx;padding-top: 50rpx;width: 100%;display: flex;">
					<view style="width: 78%;height: 100rpx;">
					</view>
					<image src="../../static/my/editpassword.png" style="width: 130rpx;height: 130rpx;margin-top: -20rpx;"></image>
				</view>
			</view>
			
			<view class="t-box" style="margin-top: -100rpx;">
				<view class="kuang"  style="padding-top: 50rpx;">
					<view class="k_left">
						<view>旧密码</view><view style="color: red; margin-left: 5rpx;padding-top: 10rpx;"></view>
					</view>
					<view class="k_right">
						<view style="width: 90%;"><input placeholder="请输入旧密码" v-model="oldpwd" /></view>
					</view>
				</view>
				<view class="kuang">
					<view class="k_left">
						<view>新密码</view><view style="color: red; margin-left: 5rpx;padding-top: 10rpx;"></view>
					</view>
					<view class="k_right">
						<view style="width: 90%;"><input placeholder="请输入新密码" v-model="pwd" /></view>
					</view>
				</view>
				<view class="kuang">
					<view class="k_left">
						<view>确认新密码</view><view style="color: red; margin-left: 5rpx;padding-top: 10rpx;"></view>
					</view>
					<view class="k_right">
						<view style="width: 90%;"><input placeholder="请确认新密码" v-model="pwd2" /></view>
					</view>
				</view>
				<view style="height: 50rpx;"></view>
				
			</view>
			
			<view class="footer" @click="sub">
				<view class="btn" >保存</view>
			</view>
			
		</view>
			
		
	</view>
</template>

<script>
	import CustomTabBar from '@/uni_modules/niceui-tabBar/components/niceui-tabBar/niceui-tabBar.vue';
	import tabbar from '@/uni_modules/niceui-tabBar/common/tabbar.js'
	export default {
	    components: {
			CustomTabBar
	    },
	    data() {
	        return {
				currentTab: 3, // 当前选中的tab索引
				tabItems:tabbar.tabItems,
				color:tabbar.color,
				selectedColor:tabbar.selectedColor,
				
				oldpwd:'',
				pwd:'',
				pwd2:''
			}
		},
		methods: {
			onTabClick(index) { // 切换tab的函数，当选中某个tab时触发
			   //this.currentTab = index;  

			   if(index!=this.currentTab){
					uni.redirectTo({
						url:this.tabItems[index].pagePath
					})
			   }
			 },
			 sub(){
				 var that = this
				 if(!uni.getStorageSync('member')){
					 uni.showToast({ title: '请登录！', icon: 'none' });
					 setTimeout(function(){
						 uni.navigateTo({
							url:'/pages/my/login'
						 })
					 },2000)
				 }
				 
				 if (!that.oldpwd) {
				 	uni.showToast({ title: '请输入旧密码', icon: 'none' });
				 	return;
				 }
				 if (!that.pwd) {
				 	uni.showToast({ title: '请输入密码', icon: 'none' });
				 	return;
				 }
				 if (!that.pwd2) {
				 	uni.showToast({ title: '请再次输入密码', icon: 'none' });
				 	return;
				 }
				 
				 if(that.pwd!=that.pwd2){
				 	uni.showToast({ title: '两次密码不一致', icon: 'none' });
				 	return;
				 }
				 var member = uni.getStorageSync('member')
				 uni.request({
					url:getApp().globalData.host+'srapi/home/edit_password',
					method:'POST',
					data: { // 请求的参数
						phone:member.phone,pwd:that.pwd,oldpwd:that.oldpwd
					},
					header: { // 设置请求的header
						'content-type': 'application/json' // 默认值
					},
					success: (res) => {
						if(res.data.msg==''){
							uni.setStorageSync('member',res.data.data)
							uni.showToast({ title: '修改成功！', icon: 'none' });
							setTimeout(function(){
								uni.navigateTo({
									url:'/pages/index/my'
								})
							},2000)
							
						}else{
							uni.showToast({ title: res.data.msg, icon: 'none' });
						}
					}
				 })
				 			
			 }
		}
	}
</script>

<style>
	/* #ifdef H5 */
		page, .uni-page-wrapper { background-color: #f8f8f8; } /* 仅在H5平台生效 */
		/* #endif */
		
		page {
		    padding-bottom: 0rpx;
		}
		
		.login-bg {
		}
		.bg24{
			height: 250rpx;
			background-color: #336CFE;
		}
		.t-box{
			text-align: center;
			width: 100%;
			margin: 0 auto;
			margin-top: -50rpx;
			font-size: 28rpx;
			background-color: #ffffff;
			border-top-left-radius: 40rpx;
			border-top-right-radius: 40rpx;
			box-shadow: 0 5px 7px 0 rgba(0, 0, 0, 0.15);
			z-index: 9;
		}
		.erweima{
			width: 270rpx; height: 270rpx; padding-top: 30rpx;margin:auto;
		}
		.kuang{
			width: 100%;display: flex;margin-top: 50rpx;
		}
		.line{
			width: 110%;
			border-bottom: 1px #eee solid;
			margin-left: -5%;
			margin-top: 30rpx;
		}
		.k_left{
			width: 45%;
			padding-left: 5%;
			text-align: left;
			height: 30rpx;
			line-height: 30rpx;
		}
		.k_left view{
			height: 30rpx;
			line-height: 30rpx;
		}
		.k_right{
			width: 45%;
			padding-right: 5%;
			text-align: right;
			color: #999;
		}
		.jiantou{
			width: 20rpx;
			height: 20rpx;
			margin-top: 12rpx;
			margin-left: 5rpx;
		}
		.footer{
			width: 100%;
			height: 120rpx;
			position: fixed;
			background-color: #fff;
			border: 0px;
			bottom: 0rpx ;
			left: 0%;
		}
		.bold{
			font-weight: 700;
		}
		.btn{
			width: 95%;
			z-index: 99;
			border-radius: 20rpx;
			background-color: #336CFE;
			color: #fff;
			text-align: center;
			height: 80rpx;
			line-height: 80rpx;
			margin: auto;
			margin-top: 20rpx;
		}
</style>